<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#cv {
				-webkit-box-shadow: 0 0 20px #000;
				-moz-box-shadow: 0 0 20px #000;
				box-shadow: 0 0 20px #000;
				display: block;
				margin: 30px auto;
				background: #333;
			}
		</style>
	</head>

	<body>
		<canvas id="cv" width="1000" height="600"></canvas>
		<script type="text/javascript">
			var cv = document.getElementById('cv'); // 画布
			var ctx = cv.getContext('2d'); // 画笔

			//全局变量
			var minR = 5,
				maxR = 10; //半径范围
			var minspeed = -4,
				maxspeed = 3; //速度范围
			var ballNum = 50;
			var ballArr = [];
			var mouseX,mouseY;//鼠标位置
			var mouseDis=150;//鼠标交互半径

			//随机函数
			function rN(min, max) {
				return Math.round(Math.random() * (max - min) + min);
			}

			/*封装类，小球类，绘制小球的所有信息
			 * x,y:圆心的位置；
			 * r:圆心半径
			 * bg:颜色
			 * speedx，speedy：x方向速度和y
			 * */
			function Ball(x, y, r, bg, speedx, speedy) {
				this.x = x;
				this.y = y;
				this.r = r;
				this.bg = bg;
				this.speedx = speedx;
				this.speedy = speedy;
			}
			Ball.prototype.move = function() {
				//先计算x,y的位置(圆心的位置)
				this.x += this.speedx;
				this.y += this.speedy;
				//判断小球到达置负条件，对应方向的速度要置负
				if(this.x < this.r || this.x > cv.width - this.r) {
					this.speedx *= -1;
				}
				if(this.y < this.r || this.y > cv.height - this.r) {
					this.speedy *= -1;
				}
				//让一个小球的碰壁反弹代码
				ctx.beginPath();
				ctx.fillStyle = this.bg;
				ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
				ctx.fill();

			}

			

			//创建一个小球
			function moreBall() {
				var r = rN(minR, maxR);
				var x = rN(r, cv.width - r); //x的范围
				var y = rN(r, cv.height - r); //y范围
				var bg = 'rgb(' + rN(20, 225) + ',' + rN(20, 225) + ',' + rN(20, 225)+','+0.8+')';
				var speedx = rN(minspeed, maxspeed);
				speedx = speedx == 0 ? 1 : speedx;
				var speedy = rN(minspeed, maxspeed);
				speedy = speedy == 0 ? -1 : speedy;
				//  实例化一个小球
				var ball = new Ball(x, y, r, bg, speedx, speedy);
				ballArr.push (ball);
			}
			
			// 创建多个小球
			for(var i=0;i<ballNum;i++){
				moreBall();
			}
			//找出鼠标交互半径内的所有小球
			function getCloseBall(){
				var closeBallArr=[];
				//如果mouseX,mouseY有值，就做运算
				if(mouseX && mouseY){
					for(var i in ballArr){
						//ballArr
						if(mouseDis>=Math.sqrt(Math.pow((ballArr[i].x - mouseX), 2) + Math.pow((ballArr[i].y - mouseY), 2))){
							closeBallArr.push(ballArr[i]);
						}
					}
					return closeBallArr;
				}
				return [];
			}
			
			//将鼠标交互半径内的所有小球两两划线
			function drawLine(){
				var arr=getCloseBall();
				for(var i=0;i<arr.length-1;i++){
					for(var j=i+1;j<arr.length;j++){
						ctx.moveTo(arr[i].x,arr[i].y);
						ctx.lineTo(arr[j].x,arr[j].y);
						ctx.strokeStyle='rgb(' + rN(20, 225) + ',' + rN(20, 225) + ',' + rN(20, 225) + ')';
						ctx.stroke();
					}
				}
			}
			function run() {
				//清除画布
				ctx.clearRect(0, 0, cv.width, cv.height);
				//调用所有小球的move函数
				for(var i in ballArr){
					ballArr[i].move();
				}
				drawLine();
				window.requestAnimationFrame(run);
			}
			run();
			
			cv.onmousemove=function(ev){
				//鼠标移动时检测鼠标的位置
				var e=ev || window.event;
				 mouseX=e.clientX-cv.offsetLeft;
				 mouseY=e.clientY-cv.offsetTop;
				//循环ballArr
			}
			
		</script>
	</body>

</html>